<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位：box2压倒box1图片上 */
			div.box1{
				width: 250px;
				height: 250px;
				background:url(img/王培贤.png);
				/* 声明一个相对定位方向属性 */
				background-size: 100%;
				position: absolute;
				/* left: 230px;
				top: 40px; */
				z-index: 1;
			}
			div.box2{
				width: 250px;
				height: 250px;
				background: url(img/1.gif);
				background-size: 100%;
				position: absolute;
				/* left: 255px;
				top: -183px;*/
				z-index: 3; 
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对与绝对（① 相对与父元素定位：功能：单一元素定位，元素在正常文档流中，推荐）
		                     pasition属性：relative：声明元素可以用相对定位意义
							              方向属性：left、right、top、bottom
										  堆叠顺序属性：z-index
										                 属性值数值，数值越大，越靠前
	               绝对定位（按照定位祖先【页面左上角】进行定位
				              功能：脱离文档流，不占据原空间
							  方向属性和叠加属性和相对以及定位属性公用
							  position属性：absolute；声明文员可以使用绝对定位）
							  
					实际开发中：相对定位结合绝对定位一起使用
							             侧边栏、左栏【挂靠】
					案例：左栏弹出【HTML结构、语义化便签+css两种定位+js】
		-->
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>